<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2025-10-18 11:01:44
 * @LastEditors: 小白
 * @LastEditTime: 2025-10-20 09:18:28
 * @FilePath: \tmsadmin\src\views\contract\template\index.vue
-->
<template>
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          合同模板
        </div>
      </div>
    </template>
    <div v-loading="loading" style="display: flex;  align-items: center; justify-content: center; width: 100%;">
      <el-form ref="ruleFormRef" v-loading="loading" :model="ruleForm" :rules="rules" label-width="100px"
        class="demo-ruleForm" status-icon>
          <el-form-item label="合同模板" prop="contractTemplate">
          <Editors ref="editorRef" :height="'800px'" :value="ruleForm.contractTemplate" @updateValue="getValue"></Editors>
        </el-form-item>
        <el-form-item label="上传公章" prop="officialSeal">
          <el-upload class="avatar-uploaders" :action="HTTP_URI.UPLOADFILE" :show-file-list="false" :headers="headers"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.officialSeal" :src="ruleForm.officialSeal" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <el-input placeholder="请输入" v-model="ruleForm.officialSeal" v-show="false" />
        </el-form-item>
        <el-form-item label="邮寄地址" prop="mailingAddress">
          <el-input placeholder="请输入" v-model="ruleForm.mailingAddress" />
        </el-form-item>
        <el-form-item label="邮政编码" prop="postalCode">
          <el-input placeholder="请输入" v-model="ruleForm.postalCode" />
        </el-form-item>
        <el-form-item label="业务电话" prop="businessPhone">
          <el-input placeholder="请输入" v-model="ruleForm.businessPhone" />
        </el-form-item>
        <el-form-item label="财务电话" prop="earningsCall">
          <el-input placeholder="请输入" v-model="ruleForm.earningsCall" />
        </el-form-item>
        
      </el-form>
      
    </div>
    <div class="dialog-footer" style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="submit()">
        保存
      </el-button>
      <el-button type="primary" @click="yulan()">
        预览
      </el-button>
      <el-button @click="handleCloses()">取消</el-button>
    </div>
  </el-card>
  <Model ref="modelRef"></Model>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import Editors from '@/components/editorht.vue'
import Model from './modal.vue'
import { REQUEST } from '@/api/request'
import { HTTP_URI } from '@/api/http'
import { ref, onMounted } from 'vue'
import { store } from '@/store'
import { getToken } from '@/plugins/cookie'
const ruleForm = ref({
  officialSeal: '',
  contractTemplate: '',
  houseId: store.state.userInfo.houseId,
  mailingAddress: '',
  postalCode: '',
  businessPhone: '',
  earningsCall: ''
})
const headers = ref({
  'Token': getToken()
})
const rules = ref({

})
const editorRef = ref()
const modelRef = ref()
const contractTemplate = ref('')
const loading = ref(false)
const getValue = (res: any) => {
  console.log(res, 'getValue');
  // ruleForm.value.content = res
}
const yulan = () => {
  modelRef.value.openModal({ data: editorRef.value.data.content, url: images.value })
}
onMounted(() => {
  getData()
})
const images = ref('')
const getData = () => {
  REQUEST.POST('OFFICIALINFO', {
    id: store.state.userInfo.houseId
  }).then((res: any) => {
    if (res.status == 200) {
      console.log(res.data.contractTemplate)
      contractTemplate.value = res.data.contractTemplate
      images.value = res.data.officialSeal
      setTimeout(() => {
        editorRef.value.setValues(contractTemplate.value)
      }, 100);
    }
  })
}

const handleAvatarSuccess = (response: any) => {
   loading.value = false
  ruleForm.value.officialSeal = response.data.url
}

const beforeAvatarUpload = (rawFile: any) => {
  loading.value = true
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传图片格式仅支持jpg、png')
     loading.value = false
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB')
     loading.value = false

    return false
  }
  return true
}
const submit = () => {
  if (editorRef.value.data.content) {
    loading.value = true
    REQUEST.POST('HOUSEEDIT', {
      id: store.state.userInfo.houseId,
      contractTemplate: editorRef.value.data.content
    }).then((res: any) => {
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '编辑成功！'
        })
        loading.value = false
        getData()
      } else {
        ElMessage({
          type: 'warning',
          message: res.message
        })
      }
    })
  } else {
    ElMessage({
      type: 'warning',
      message: '请先编辑内容'
    })
  }
}
const handleCloses = () => {
  contractTemplate.value = ''
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-ruleForm {
  max-width: 900px;
}

.avatar-uploaders {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}

.avatar-uploaders:hover {
  border: 1px #409eff dashed;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #cccccc;
}

.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
